
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2015/7/24 0024
  Time: 14:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8">
  <title>Free HTML5 Bootstrap Admin Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
  <meta name="author" content="Muhammad Usman">

  <!-- The styles -->
  <link id="bs-css" href="css/bootstrap-cerulean.min.css" rel="stylesheet">

  <link href="css/charisma-app.css" rel="stylesheet">
  <link href='bower_components/fullcalendar/dist/fullcalendar.css' rel='stylesheet'>
  <link href='bower_components/fullcalendar/dist/fullcalendar.print.css' rel='stylesheet' media='print'>
  <link href='bower_components/chosen/chosen.min.css' rel='stylesheet'>
  <link href='bower_components/colorbox/example3/colorbox.css' rel='stylesheet'>
  <link href='bower_components/responsive-tables/responsive-tables.css' rel='stylesheet'>
  <link href='bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css' rel='stylesheet'>
  <link href='css/jquery.noty.css' rel='stylesheet'>
  <link href='css/noty_theme_default.css' rel='stylesheet'>
  <link href='css/elfinder.min.css' rel='stylesheet'>
  <link href='css/elfinder.theme.css' rel='stylesheet'>
  <link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
  <link href='css/uploadify.css' rel='stylesheet'>
  <link href='css/animate.min.css' rel='stylesheet'>

  <!-- jQuery -->
  <script src="bower_components/jquery/jquery.min.js"></script>

  <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <!-- The fav icon -->
  <link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
<div class="row">
  <div class="box col-md-12">
    <div class="box-inner">
      <div class="box-header well" data-original-title="">
        <h2><i class="glyphicon glyphicon-user"></i> Datatable + Responsive</h2>

        <div class="box-icon">
          <a href="#" class="btn btn-setting btn-round btn-default"><i class="glyphicon glyphicon-cog"></i></a>
          <a href="#" class="btn btn-minimize btn-round btn-default"><i
                  class="glyphicon glyphicon-chevron-up"></i></a>
          <a href="#" class="btn btn-close btn-round btn-default"><i class="glyphicon glyphicon-remove"></i></a>
        </div>
      </div>
      <div class="box-content">
        <div class="alert alert-info">For help with such table please check <a href="http://datatables.net/" target="_blank">http://datatables.net/</a></div>
        <table class="table table-striped table-bordered bootstrap-datatable datatable responsive">
          <thead>
          <tr>
            <th>用户号</th>
            <th>用户名</th>
            <th>角色</th>
            <th>状态</th>
            <th>动作</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>David R</td>
            <td class="center">2012/01/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-success label label-default">Active</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Chris Jack</td>
            <td class="center">2012/01/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-success label label-default">Active</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Jack Chris</td>
            <td class="center">2012/01/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-success label label-default">Active</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Muhammad Usman</td>
            <td class="center">2012/01/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-success label label-default">Active</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Sheikh Heera</td>
            <td class="center">2012/02/01</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-default label label-danger">Banned</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Helen Garner</td>
            <td class="center">2012/02/01</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-default label label-danger">Banned</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Saruar Ahmed</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Ahemd Saruar</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Habib Rizwan</td>
            <td class="center">2012/01/21</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-success label label-default">Active</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Rizwan Habib</td>
            <td class="center">2012/01/21</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-success label label-default">Active</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Amrin Sana</td>
            <td class="center">2012/08/23</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-default label label-danger">Banned</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Sana Amrin</td>
            <td class="center">2012/08/23</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-default label label-danger">Banned</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Ifrah Jannat</td>
            <td class="center">2012/06/01</td>
            <td class="center">Admin</td>
            <td class="center">
              <span class="label-default label">Inactive</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Jannat Ifrah</td>
            <td class="center">2012/06/01</td>
            <td class="center">Admin</td>
            <td class="center">
              <span class="label-default label">Inactive</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Robert</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Dave Robert</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Brown Robert</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Usman Muhammad</td>
            <td class="center">2012/01/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-success label label-default">Active</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Abdullah</td>
            <td class="center">2012/02/01</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-default label label-danger">Banned</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Dow John</td>
            <td class="center">2012/02/01</td>
            <td class="center">Admin</td>
            <td class="center">
              <span class="label-default label">Inactive</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>John R</td>
            <td class="center">2012/02/01</td>
            <td class="center">Admin</td>
            <td class="center">
              <span class="label-default label">Inactive</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Paul Wilson</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Wilson Paul</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Heera Sheikh</td>
            <td class="center">2012/01/21</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-success label label-default">Active</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Sheikh Heera</td>
            <td class="center">2012/01/21</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-success label label-default">Active</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Christopher</td>
            <td class="center">2012/08/23</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-default label label-danger">Banned</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Andro Christopher</td>
            <td class="center">2012/08/23</td>
            <td class="center">Staff</td>
            <td class="center">
              <span class="label-default label label-danger">Banned</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Jhon Doe</td>
            <td class="center">2012/06/01</td>
            <td class="center">Admin</td>
            <td class="center">
              <span class="label-default label">Inactive</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Lorem Ipsum</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Abraham</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Brown Blue</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          <tr>
            <td>Worth Name</td>
            <td class="center">2012/03/01</td>
            <td class="center">Member</td>
            <td class="center">
              <span class="label-warning label label-default">Pending</span>
            </td>
            <td class="center">
              <a class="btn btn-success" href="#">
                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                View
              </a>
              <a class="btn btn-info" href="#">
                <i class="glyphicon glyphicon-edit icon-white"></i>
                Edit
              </a>
              <a class="btn btn-danger" href="#">
                <i class="glyphicon glyphicon-trash icon-white"></i>
                Delete
              </a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!--/span-->
</div><!--/row-->
</body>
</html>
